<template>
  <div>
    <Breadcrumb :style="{margin: '24px 0'}">
        <BreadcrumbItem>首页</BreadcrumbItem>
        <BreadcrumbItem>文章管理</BreadcrumbItem>
        <BreadcrumbItem>{{articletitle}}</BreadcrumbItem>
    </Breadcrumb>
    <Content :style="{padding: '24px', minHeight: '580px', background: '#fff'}">
        <div>
          <h2 class="head_style">{{articletitle}}</h2>
        </div>
        <div>
          <p ><b>文章标题</b></p>
          <Input  placeholder="请输入文章标题" v-model="arttitle" class="input-width"/>
        </div><br>
        <div>
          <p ><b>作&nbsp;&nbsp;&nbsp;&nbsp;者</b></p>
          <Input  placeholder="请输入文章作者" class="input-width" v-model="another"/>
        </div><br>
        <div>
          <p ><b>所属分类</b></p>
          <Select v-model="model1" class="input-width" v-if="ueState">
              <Option v-for="item in categorylist" :value="item.id" :key="item.id" >{{item.cat_name}}</Option>
          </Select>
          <!-- <Select v-model="model1" class="input-width" v-if="ueState">
              <Option v-for="item in categorylist" :value="item.id" :key="item.id" v-html="item.cat_name"></Option>
          </Select> -->
        </div><br>
        <div>
          <p ><b>所属标签</b></p>
          <Select v-model="labelstr" multiple class="input-width">
              <Option v-for="item in labellist" :value="item.id" :key="item.id">{{ item.labelname }}</Option>
          </Select>
        </div><br>
        <div>
          <p ><b>封面大图</b></p>
          <div>
            <img :src="artlogo" id="web_favicon" class="img_style">
          </div>
          <Upload action="/admin/Article/uploadArticle" name="image" :on-success="handleSuccess" :show-upload-list="false">
              <Button type="ghost" icon="ios-cloud-upload-outline" id="ghost" >文件上传</Button>
          </Upload>
        </div><br>
        <div>
          <p ><b>描&nbsp;&nbsp;&nbsp;&nbsp;述</b></p>
          <Input v-model="artdesc" type="textarea" :autosize="{minRows: 2,maxRows: 10}" placeholder="请输入文章简介" style="width:1200px"></Input>
        </div><br>
        <!-- ===================  editor组件 start  ==================== -->
        <div class="editor-container">
          <p ><b>正&nbsp;&nbsp;&nbsp;&nbsp;文</b></p>
          <!-- <UE :defaultMsg=defaultMsg :config=config  :id=ue1  ref="ue" v-if="ueState"></UE> -->
          <!-- <vue-ueditor-wrap v-model="msg"></vue-ueditor-wrap> -->
          <vue-ueditor-wrap :config="myConfig" v-model="defaultMsg"></vue-ueditor-wrap>
        </div><br>
        <!-- ===================  editor组件 end    ==================== -->
        <div>
          <RadioGroup v-model="status">
              <Radio :label = "0" >未审核</Radio>
              <Radio :label = "1" >已审核</Radio>
          </RadioGroup>
        </div><br><br>
        <div>
          <Button type="primary" @click="putArticle()">提交</Button>
          <Button ><router-link to='/article'><div style="color:balck">返回</div></router-link></Button>
        </div><br><br>
    </Content>
  </div>
</template>
<style scoped>
    .info{
      border-radius: 10px;
      line-height: 20px;
      padding: 10px;
      margin: 10px;
      background-color: #ffffff;
    }
    .head_style {
      height: 50px;
    }
    p {
      line-height: 30px;
    }
    .img_style{
      height:200px;
    }
    .input-width{
      width: 700px;
    }
</style>
<script>
  // 引入axios组件
  import axios from "axios";
  import qs from "qs"; //处理数据  qs.stringify(params)
  //引入公共组件editor 
  // import UE from '../public/ue.vue';
  import VueUeditorWrap from 'vue-ueditor-wrap';
  export default {
    // ===========================  ueditor  使用代码 start   ================
    // components: {UE},
    components: {
        VueUeditorWrap
    },
    data() {
      return {
        myConfig: {
            // 如果需要上传功能,找后端小伙伴要服务器接口地址
            // serverUrl: 'http://api.demo.com/ueditor/upload',
            // 你的UEditor资源存放的路径,相对于打包后的index.html
            UEDITOR_HOME_URL: './UEditor/',
            // 编辑器不自动被内容撑高
            autoHeightEnabled: false,
            // 初始容器高度
            initialFrameHeight: 500,
            // 初始容器宽度
            initialFrameWidth: '100%',
            // 关闭自动保存
            enableAutoSave: false
        },
        msg: '<h2>Hello World!</h2>',
        defaultMsg: '',//默认显示的文字
        config: {
          initialFrameWidth: 1200,
          initialFrameHeight: 350
        },
        ue1: "ue1", // 不同编辑器必须不同的id
        ueState:false,//ue状态
    //=============================   ueidtor  使用代码  end   ================
        articletitle:'',//面包屑导航显示标题
        arttitle:'',//文章标题
        another:'',//作者
        // cid:'',//文章分类
        model1:'',//文章分类
        artdesc:'',//文章描述
        artlogo:'',//文章图片
        status:'',//文章状态
        categorylist:'',//分类列表
        artid:'',//文章id
        content:'',//文章内容
        articleinfo:'',//文章信息
        labellist:'',//标签列表
        labelstr:'',//标签值
        labellistedit:'',//已选中的标签
      }
    },
    created(){
      let artid = this.$route.query.artid;
      const self = this;
      if(artid){
        this.articletitle = "修改文章";
        self.ueState = false;
      }else{
        this.articletitle = "添加文章";
        self.ueState = true;
      }
      axios({
        method: "post",
        url: "/admin/Article/editArticle",
        data: {id: artid}
      })
      .then(function(response) {
        // console.log(response.data.articleinfo.labelstr);
          self.categorylist = response.data.categorylist;
          self.labellist = response.data.labellist;
          if(artid){
            self.articleinfo = response.data.articleinfo;
            self.arttitle = response.data.articleinfo.arttitle;
            self.another = response.data.articleinfo.another;
            self.artdesc = response.data.articleinfo.artdesc;
            self.artlogo = response.data.articleinfo.artlogo;
            self.status = response.data.articleinfo.status;
            self.defaultMsg = response.data.articleinfo.content;
            self.ueState = true;//控制ueditor和select是否加载
            self.model1 = response.data.articleinfo.art_cid;
            self.artid = response.data.articleinfo.id;
            self.labelstr = response.data.articleinfo.labelstr;
            // self.labelstr = [2, 3, 5, 7, 8, 12];
          } 
      })
      .catch(function(response) {
          self.$Message.error('请求失败');
      });

      this.$Spin.show();
      setTimeout(() => {
          this.$Spin.hide();
      }, 1000);
    },
    methods: {
      // 图片上传回调钩子方法
      handleSuccess (response) {
        console.log(response);
        if(response.code == 1){
          this.artlogo = response.imgpath;
          this.$Message.success('图片上传成功');
        }else{
          this.$Message.error('图片上传失败');
        } 
      },
      // ===========================  ueditor  使用代码 start   ================
      // 获取子组件中ueidtor的值（含html标签）
      // ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。
      // 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：
      // getUEContent() {
      //   let content = this.$refs.ue.getUEContent(); // 调用子组件方法
      //   console.log(content)
      // },
      // 获取子组件中ueidtor的值（不含html标签）
      // getUEContentTxt() {
      //   let content = this.$refs.ue.getUEContentTxt(); // 调用子组件方法
      //   console.log(content)
      // },
    //=============================   ueidtor  使用代码  end   ================
      // 文章提交方法 
      putArticle(){
        this.content = this.$refs.ue.getUEContent(); // 调用子组件方法
        const self = this;
        console.log(self.labelstr);
        axios({
            method: "post",
            url: "/admin/Article/updateArticle",
            data: 
            {
              'arttitle':self.arttitle,
              'another':self.another,
              'art_cid':self.model1,
              'artlogo':self.artlogo,
              'artdesc':self.artdesc,
              'status':self.status,
              'content':self.content,
              'artid':self.artid,
              'labelstr':self.labelstr,
            }
        })
        .then(function(response) {
          console.log(response);
            if(response.data.code == 1){
              self.$Message.success(response.data.msg);
              self.$router.push({  
                  path:'/article',    //这是路由名称      
              })
            }else{
              self.$Message.error(response.data.msg);
            }
        })
        .catch(function(response) {
            self.$Message.error('请求失败');
        });
      },
    }
  };
</script>


